<template>
	<div>
		<Tabs>
			<TabPane label="系统图库">
				<div class="ui-flex">
					<div class="ui-flex-full">
						<Button type="primary">上传图片/视频</Button>
						<div class="resource-stat-bar">
							<span>图片数量：</span>
							<Progress :percent="25" hide-info status="active" />
							<span>66820/100000</span>
						</div>
						<div class="resource-stat-bar">
							<span>视频数量：</span>
							<Progress :percent="25" hide-info status="active" />
							<span>250/1000</span>
						</div>
					</div>
					<div class="ui-form-inline">
						<Form :model="params" inline @submit.native.prevent>
			                <FormItem label="关键词">
			                    <Input v-model="params.keywords" placeholder="请输入关键词搜索" suffix="ios-search" clearable style="width: 280px"></Input>
			                </FormItem>
			                <Button type="primary" @click="handleSearch">筛选</Button>
				    	</Form>
					</div>
				</div>
				<div class="resources-wrap">
					<div class="resources-header ui-flex ui-flex-between">
						<Checkbox :value="isCheckedAll" @on-change="handleCheckedAll"> 全选</Checkbox>
						<p>图片支持bmp、png、jpeg、jpg、gif格式，每张图片最大上传尺寸为2M；视频支持mp4、flv、f4v、webm、avi格式，视频最大上传尺寸为100M，时长不超过10h</p>
					</div>
					<div class="resources-cells">
						<div class="resources-cells-item" v-for="item in datas" :class="{checked: item.checked}">
							<div class="image-box">
								<ImageCell :width="198" :src="item.url"></ImageCell>
								<div class="mask">
									<div class="cell">
										<Icon type="ios-cloud-download-outline" :size="30" />
										<p class="text">下载</p>
									</div>
									<div class="cell" @click="handleDelete(item)">
										<Icon type="ios-close-circle-outline" :size="30" />
										<p class="text">删除</p>
									</div>
								</div>
							</div>
							<div class="title">
								<p v-if="!item.edit" class="ui-ellipsis" @dblclick="handleDbclick(item)"><Checkbox :value="item.checked" @on-change="handleChecked($event, item)"></Checkbox>{{ item.name }}</p>
								<div v-else>
									<input :value="item.name" class="ivu-input" @blur="item.edit = false" @keyup.enter="handleChangeName($event, item)" />
								</div>
								<P>上传时间：{{ item.create_time }}</P>
							</div>
						</div>
					</div>
				</div>
			</TabPane>
		</Tabs>
		<FooterBar class="ui-flex ui-flex-between">
			<div>
				<Button @click="handleBatchDelete">删除</Button>
			</div>
			<Page
				:current="params.page"
				:page-size="params.limit"
				:total="total"
				show-total
				show-elevator
				show-sizer
				@on-change="handleChangePage"
				@on-page-size-change="handleChangePageSize"
			/>
		</FooterBar>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import ImageCell from '@/components/ImageCell/index.vue';
import FooterBar from '@/components/FooterBar.vue';
export default {
	name: 'resources-index',
	components: {
		ImageCell,
		FooterBar
	},
	data() {
		return {
			isCheckedAll: false,
			total: 0,
			params: {
				keywords: '',
				page: 1,
				limit: 12
			},
			datas: []
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			Util.ajax.post(this.API['API_ATTACHMENT_LISTS'], this.params).then((res) => {
				this.total = res.total;
				this.datas = res.data;
			}).catch(() => {
				
			})
		},
		handleSearch() {
			
		},
		// 切换页码
		handleChangePage(page) {
            this.params.page = page;
        },
        // 切换每页条数
        handleChangePageSize(size) {
        	this.params.page = 1;
            this.params.limit = size;
        },
        // 全选
        handleCheckedAll(status) {
        	this.isCheckedAll = status;
        	this.datas = this.datas.map(item => {
        		item.checked = status;
        		return item;
        	})
        },    
        handleChecked(status, row) {
        	row.checked = status;
        	let flog = true;
        	this.datas.forEach(item => {
        		if(!item.checked) {
        			flog = false;
        		}
        	})
        	this.isCheckedAll = flog;
        },
        handleDbclick(item) {
        	this.$set(item, 'edit', true);
        },
        handleDelete(item) {
        	this.$Modal.confirm({
                title: '操作提示',
                content: '<p>是否确认删除所选数据？</p>',
                onOk: () => {
                    
                }
            });
        },
        // 批量删除
        handleBatchDelete() {
        	let ids = [];
        	this.datas.forEach(item => {
        		if(item.checked) {
        			ids.push(item.id);
        		}
        	})
        	if(ids.length == 0) {
        		this.$Message.error('请至少选择一个文件');
        		return false;
        	}
        	this.$Modal.confirm({
                title: '操作提示',
                content: '<p>是否确认删除所选数据？</p>',
                onOk: () => {
                    
                }
            });
        },
        handleChangeName(event, item) {
        	item.name = event.target.value;
        	item.edit = false;
        }
	}
}
</script>

<style lang="less">
.resource-stat-bar {
	display: inline-block;
	margin-left: 20px;
	margin-top: 7px;
	vertical-align: top;
	.ivu-progress {
		display: inline-block;
		width: 140px;
	}
}
.resources-wrap {
	border: 1px solid #e0e1e3;
}
.resources-header {
	padding: 10px 12px;
	line-height: 20px;
	border-bottom: 1px solid #ebecee;
	background-color: #f8f8f9;
}
.resources-cells {
	padding: 20px 0 0 20px;
	&-item {
		display: inline-block;
		margin: 0 20px 20px 0;
		width: 200px;
		border: 1px solid #e1e2e3;
		.image-box {
			position: relative;
			width: 198px;
			height: 198px;
			.mask {
				display: none;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				padding-top: 80px;
				color: #221816;
				font-size: 0;
				text-align: center;
				background-color: rgba(255, 255, 255, .9);
				z-index: 2;
				.cell {
					display: inline-block;
					margin: 0 15px;
					width: 30px;
					cursor: pointer;
					.ivu-icon {
						display: block;
						font-weight: bold;
					}
					.text {
						font-size: 12px;
						vertical-align: top;
						line-height: 20px;
					}
				}
			}
		}
		.ui-image-cell {
			border: 0;
		}
		.title {
			padding: 5px;
			height: 57px;
			line-height: 23px;
			font-size: 12px;
			border-top: 1px solid #e1e2e3;
			cursor: pointer;
			overflow: hidden;
		}
		.ivu-input {
			height: 23px;
			line-height: 20px;
		}
	}
	&-item:hover {
		.mask {
			display: block;
		}
	}
	&-item.checked {
		border-color: #1c9df9;
		.title {
			border-top-color: #1c9df9;
		}
	}
}
</style>